<template>

  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>作品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加作品</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card style="height: 650px">
      <el-alert title="添加作品信息" type="info" center show-icon :closable="false"></el-alert>
      <el-steps :space="200" :active="activeIndex - 0" finish-status="success" align-center>
        <el-step title="基本信息"></el-step>
        <el-step title="作品图片"></el-step>
        <el-step title="已完成"></el-step>
      </el-steps>

      <el-form :model="addForm" :rules="addFormRules" ref="ruleFormRef" label-width="100px" class="demo-ruleForm">
        <el-tabs v-model="activeIndex" :tab-position="'left'" style="height: 500px;" label-position="top">
          <el-tab-pane label="基本信息" name="0">
            <el-form-item label="需求" prop="demands">
              <el-select v-model="addForm.demands" placeholder="请选择" :change="changeDemands(addForm.demands)" clearable>
                <el-option
                  v-for="item in options"
                  :key="item.demandId"
                  :label="item.demands"
                  :value="item.demandId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="需求用户" prop="demandUsername">
              <el-input v-model="addForm.demandUsername"></el-input>
            </el-form-item>
            <el-form-item label="接单用户" prop="receiveUsername">
              <el-input v-model="addForm.receiveUsername"></el-input>
            </el-form-item>
            <el-form-item label="定金" prop="deposit">
              <el-input v-model="addForm.deposit"></el-input>
            </el-form-item>
            <el-form-item label="尾款" prop="balancePayment">
              <el-input v-model="addForm.balancePayment"></el-input>
            </el-form-item>
            <el-form-item label="订单状态" prop="status">
              <el-select v-model="addForm.status" placeholder="请选择" :change="changeDemands(addForm.demands)" clearable>
                <el-option
                  v-for="item in statusOption"
                  :key="item.statusId"
                  :label="item.status"
                  :value="item.statusId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="需求备注" prop="demandRemarks">
              <el-input v-model="addForm.demandRemarks"></el-input>
            </el-form-item>
            <el-form-item label="接单备注" prop="receiveRemarks">
              <el-input v-model="addForm.receiveRemarks"></el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="作品图片" name="1">
            <el-upload action=""
                       :on-change="uploadFile">
              <el-button type="primary" v-if="fileURL === 'http://127.0.0.1:8081/img/worksFile/上传.png'">上传文件</el-button>
              <img :src="fileURL" v-else style="width: 30%;">
            </el-upload>
            <el-button type="primary" class="btnAdd" @click="add()">添加订单</el-button>

          </el-tab-pane>
        </el-tabs>
      </el-form>

    </el-card>

  </div>

</template>

<script>
    import {selectAllDemands} from "../../assets/api/demandsApi";
    import {adminAddOrder, adminUploadFile} from "../../assets/api/orderApi";

    export default {
        name:'addOrder',
        data() {
            return {
                statusOption: [{"statusId": 0, "status": "待确认订单"},
                    {"statusId": 1, "status": "待付定金"},
                    {"statusId": 2, "status": "待上传作品"},
                    {"statusId": 3, "status": "待下载、付尾款"},
                    {"statusId": 4, "status": "待评价"},
                    {"statusId": 5, "status": "待完成"},
                    {"statusId": 6, "status": "已完成"},
                    {"statusId": -1, "status": "被拒绝"}],
                activeIndex: '0',
                addForm: {
                    demandId: 0, demandUsername: '', receiveUsername: '', deposit: 0, balancePayment: 0,
                    totalPrice: 0, filename: '', demandRemarks: '', receiveRemarks: ''
                },
                addFormRules: {
                    demands: {required: true, message: '请选择需求', trigger: 'change'},
                    demandUsername: [{required: true, message: '请输入需求用户', trigger: 'blur'}],
                    receiveUsername: [{required: true, message: '请输入接单用户', trigger: 'blur'}],
                    deposit: [{required: true, message: '请输入定金', trigger: 'blur'}],
                    balancePayment: [{required: true, message: '请输入尾款', trigger: 'blur'}],
                },
                options: [],
                fileURL: this.$store.state.Host + '/img/worksFile/上传.png',
            }
        },
        methods: {
            uploadFile(file) {
                let data = new FormData();
                data.append('file', file.raw);
                adminUploadFile(data).then((res) => {
                    this.fileURL = this.$store.state.Host + res.data;
                })
            },
            changeDemands(demandId) {
                this.addForm.demandId = demandId;
            },
            getDemands() {
                selectAllDemands().then((res) => {
                    this.options = res.data;
                })
            },
            add() {
                this.$refs.ruleFormRef.validate(
                    valid => {
                        if (!valid) {
                            return this.$message.error('请填写必要的表单项！');
                        } else {
                            this.addForm.totalPrice = parseInt(this.addForm.deposit) + parseInt(this.addForm.balancePayment);
                            adminAddOrder(this.addForm).then((res) => {
                                if (res.code !== 200){
                                    return this.$message.error(res.message);
                                } else {
                                    this.$message.success(res.message);
                                    this.$router.push('/orders');
                                }
                            })
                        }
                    })
            },
        },
        created() {
            this.getDemands();
        }

    }
</script>

<style scoped>
  @import "../../styles/css/global.css";

  /deep/ .el-step {
    margin: 15px 0;
  }

  /deep/ .el-step__title {
    font-size: 13px;
  }

  .btnAdd {
    float: left;
    margin-left: 50px;
    margin-top: 20px;
  }
</style>
